<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="30%"
    center
  >
    <div class="text-center fontDiv" v-if="isSuccess">
      <p>您确定要退款吗？</p>
      <p>
        （点击查看<span class="blue-font pointer" @click="toDetails"
          >退款明细</span
        >
        ）
      </p>
    </div>
    <div class="text-center fontDiv" v-else>
      <img src="../../../../assets/images/refund_tip.png" alt="">
      <p class="sorry">对不起，退款失败！</p>
      <p class="fail_reason">失败原因：账户余额不足</p>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button
        type="primary"
        @click="submitRefund"
        v-if="isSuccess"
        element-loading-text="正在提交,请稍后..."
        v-loading.fullscreen.lock="agreeLoading"
        >确 定</el-button>
      <!-- <el-button type="primary" @click="topUp" v-else>去充值</el-button> -->
    </span>
  </el-dialog>
</template>

<script>
import { adminCheckPass } from "@/api/orderRefund";
export default {
  props: ["refundId", "orderId"],
  data() {
    return {
      dialogTitle: "同意退款",
      dialogVisible: false,
      isSuccess: true,
      agreeLoading: false,
    };
  },
  methods: {
    close() {
      this.dialogVisible = false;
      this.agreeLoading = false;
    },
    submitRefund() {
      this.agreeLoading = true;
      adminCheckPass(this.refundId)
        .then((res) => {
          this.close();
          this.$parent.getList();
        })
        .catch((error) => {
          if(error.status == 101){
            this.isSuccess = false
          }
          this.agreeLoading = false;
        });
    },
    topUp() {
      let routeData = this.$router.resolve({
        name: "recharge"
      });
      window.open(routeData.href, '_blank');
    },
    toDetails() {
      this.close();
      const id = this.orderId;
      this.$router.push({ name: "financeRefundDetail", params: { id } });
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.fontDiv p {
  line-height: 30px;
}
.sorry {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}
.fail_reason {
  font-size: 14px;
  color: #666666;
}
</style>